<template>
    <div class="main real-box">
        <div class="top-panel">
            <div class="search-pane">
                <div class="search-item-box">
                    <a-select size="small" style="width: 200px"></a-select>
                </div>
                <div class="search-item-box">
                    <a-select size="small" style="width: 200px"></a-select>
                </div>
                <div class="search-item-box">
                    <a-select size="small" style="width: 200px"></a-select>
                </div>
                <div class="search-item-box">
                    <a-button type="primary" ghost size="small">查询</a-button>
                </div>
                <div class="search-item-box">
                    <a-button type="default" class="reset-btn" size="small">重置</a-button>
                </div>
            </div>
            <div class="btn">
                <a-button type="primary" @click="addRules">添加</a-button>
            </div>
        </div>
        <div class="table-box">
            <div class="table-contain">
                <a-table :columns="columns" :data-source="data" :rowKey="data => data.id"
                         :loading="loading" :pagination="false" :scroll="{x: 1300}">
                    <template slot="tipCost" slot-scope="data">
                        {{data.tipCost}}元/度
                    </template>
                    <template slot="tipServiceCost" slot-scope="data">
                        {{data.tipServiceCost}}元/度
                    </template>
                    <template slot="peakCost" slot-scope="data">
                        {{data.peakCost}}元/度
                    </template>
                    <template slot="peakServiceCost" slot-scope="data">
                        {{data.peakServiceCost}}元/度
                    </template>
                    <template slot="flatCost" slot-scope="data">
                        {{data.flatCost}}元/度
                    </template>
                    <template slot="flatServiceCost" slot-scope="data">
                        {{data.flatServiceCost}}元/度
                    </template>
                    <template slot="valleyCost" slot-scope="data">
                        {{data.valleyCost}}元/度
                    </template>
                    <template slot="valleyServiceCost" slot-scope="data">
                        {{data.valleyServiceCost}}元/度
                    </template>
                    <template slot="createTime" slot-scope="data">
                        {{moment(data.createTime).format('YYYY-MM-DD')}}
                    </template>
                    <template slot="action" slot-scope="data">
                        <a-icon type="edit" class="icon-box" @click.stop="editRules(data.id)"/>
                    </template>
                </a-table>
            </div>
            <div class="page-box">
                <a-pagination
                        size="small"
                        :showQuickJumper="true"
                        :showSizeChanger="true"
                        :current="page.current"
                        :pageSize="page.pageSize"
                        :total="page.total"
                        :show-total="(total) => `共${total}条`"
                        @showSizeChange="onShowSizeChange"
                        @change="changePageSize"
                ></a-pagination>
            </div>
        </div>
        <AddRules ref="rules" :title="title" @reloadList="queryList"></AddRules>
    </div>
</template>

<script>
    import moment from "moment";
    import {api, post} from "../../api/api";
    import AddRules from "./components/AddRules";

    export default {
        name: "BillRules",
        components: {AddRules},
        data() {
            return {
                data: [],
                columns: [
                    {title: '计费模型编号', dataIndex: 'rulesNumber', key: 'rulesNumber', width: 130, fixed: 'left'},
                    {title: '尖电费', scopedSlots: {customRender: 'tipCost'}, width: 160},
                    {title: '尖服务费', scopedSlots: {customRender: 'tipServiceCost'}, width: 160},
                    {title: '峰电费', scopedSlots: {customRender: 'peakCost'}, width: 160},
                    {title: '峰服务费', scopedSlots: {customRender: 'peakServiceCost'}, width: 160},
                    {title: '平电费', scopedSlots: {customRender: 'flatCost'}, width: 160},
                    {title: '平服务费', scopedSlots: {customRender: 'flatServiceCost'}, width: 160},
                    {title: '谷电费', scopedSlots: {customRender: 'valleyCost'}, width: 160},
                    {title: '谷服务费', scopedSlots: {customRender: 'valleyServiceCost'}, width: 160},
                    {title: '所属电站', dataIndex: 'stationName', key: 'stationName', width: 160},
                    {title: '充电桩', dataIndex: 'pileName', key: 'pileName', width: 160},
                    {title: '更新时间', scopedSlots: {customRender: 'createTime'}, width: 160},
                    {title: '操作', scopedSlots: {customRender: 'action'}, width: 80},
                ],
                page: {
                    current: 1,
                    pageSize: 20,
                    total: 0,
                },
                loading: true,
                moment,
                title: ''
            }
        },
        created() {
            this.queryList()
        },
        methods: {
            queryList() {
                post(api.RulesEntities, {page: this.page.current, limit: this.page.pageSize}).then(res => {
                    this.data = res.data.data
                    this.page.total = res.data.count
                    this.loading = false
                })
            },
            addRules() {
                this.title = '新增计费规则'
                this.$refs.rules.show()
            },
            editRules(id) {
                this.title = '编辑计费规则'
                this.$refs.rules.show(id)
            },
            onShowSizeChange(e) {

            },
            changePageSize(e) {

            }
        }
    }
</script>

<style scoped>

</style>
